<template>
  <div class="xtx-city">
    <!-- 基础的小盒子 -->
    <div class="select" @click="toggleShow">
      <span
      class="placeholder"
      v-if="!cacheData.provinceName">请选择配送地址</span>
      <span class="value">
        {{ cacheData.provinceName }}
        {{ cacheData.cityName }}
        {{ cacheData.countyName }}
      </span>
      <i class="iconfont icon-angle-down"></i>
    </div>
    <!-- 城市list列表 -->
    <div class="option" v-if="flag">
      <span
        class="ellipsis"
        v-for="i in dataList"
        :key="i"
        @click="toggleData(i)"
        >{{ i.name }}</span
      >
    </div>
  </div>
</template>

<script>
import { ref, onMounted, reactive, watch } from 'vue'
import axios from 'axios'
export default {
  name: 'XtxCity',
  setup (props, { emit }) {
    // 1. 点击展开 点击关闭
    // 思路: 取反操作 如果当前是显示true则设置为false
    const flagRef = ref(false)
    function toggleShow () {
      flagRef.value = !flagRef.value
    }

    // 2. 拉取接口数据 渲染模板
    const dataListRef = ref([])
    let _dataList = []
    function loadCityList () {
      // 接口和其他应用接口不一致 需要单独采用axios直接进行发送
      // 不通过request模板
      axios({
        url: 'https://yjy-oss-files.oss-cn-zhangjiakou.aliyuncs.com/tuxian/area.json',
        method: 'GET'
      }).then((res) => {
        dataListRef.value = res.data
        _dataList = res.data // 不参与重新赋值
      })
    }
    onMounted(() => {
      loadCityList()
    })

    // 3. 观察返回数据列表的格式
    //   1. 数据一共有3层  level 0    市 level 1    区 level 2
    //   2. 每一层对象里都有一个固定的字段  areaList  这里存放着当前下面的子列表

    // 4. 点击城市切换
    //    1. 点击省份数据显示当前项下面的市列表  areaList
    //    2. 点击 市 显示当前市所有的区列表   areaList
    //    3. 点击区  关闭弹框  并且把所选的省市区显示到模板中 (点击哪一步 就把哪一步存起来)
    const cacheData = reactive({
      provinceCode: '', // 省code
      provinceName: '', // 省名称
      cityCode: '', // 城市code
      cityName: '', // 城市名称
      countyCode: '', // 地区code
      countyName: '' // 地区名
    })
    function toggleData (curData) {
      // 控制列表显示的响应式数据就是dataList
      // 点击的时候不断的修改这个dataList
      // 点击的是哪个 就把那个对应得到areaList字段 交给 dataList
      // console.log(curData)
      dataListRef.value = curData.areaList
      // 点击那个就先把那个的信息存一下
      // 表示当前显示的是 省
      if (curData.level === 0) {
        cacheData.provinceCode = curData.code
        cacheData.provinceName = curData.name
      }
      // 表示当前显示的是 市
      if (curData.level === 1) {
        cacheData.cityCode = curData.code
        cacheData.cityName = curData.name
      }
      // 当点击的是区   level = 2的时候  关闭弹框
      if (curData.level === 2) {
        // 表示点击的是区  关闭弹框  把选择的省市区显示到模板上
        cacheData.countyName = curData.name
        cacheData.countyCode = curData.code
        flagRef.value = false
      }
      // 在选择完城市的时候  把最终获取到的 cacheData 通过子传父传出去
      emit('change', cacheData)
    }

    // 5.优化1
    // 点击展开的时候 一直显示省数据
    // 思路：从接口拉取回数据之后 除了存入dataList(交互时候修改) 还存入另外一个地方将来想要恢复
    // 把暂存下来的省数据重新交给dataList
    // 弹框每次打开都重新赋值
    watch(() => {
      return flagRef.value
    }, () => {
      if (flagRef.value) {
        dataListRef.value = _dataList
        // window.addEventListener('click', () => {
        //   flagRef.value = false
        // })
      }
    })
    // 6.优化2
    // 每次省数据发生变化清空一下 市和区数据
    // 如何实现点击外面 同样可以关闭弹框
    watch(() => {
      return cacheData.provinceName
    }, () => {
      cacheData.cityName = ''
      cacheData.cityCode = ''
      cacheData.countyCode = ''
      cacheData.countyName = ''
    })

    return {
      flag: flagRef,
      toggleShow,
      dataList: dataListRef,
      toggleData,
      cacheData
    }
  }

}
</script>

<style scoped lang="less">
.xtx-city {
  display: inline-block;
  position: relative;
  z-index: 400;
  margin-left: 10px;
  .select {
    border: 1px solid #e4e4e4;
    height: 50px;
    padding: 0 5px;
    line-height: 50px;
    cursor: pointer;
    &.active {
      background: #fff;
    }
    .placeholder {
      color: #999;
    }
    .value {
      color: #666;
      font-size: 12px;
    }
    i {
      font-size: 12px;
      margin-left: 5px;
    }
  }
  .option {
    width: 542px;
    border: 1px solid #e4e4e4;
    position: absolute;
    left: 0;
    top: 29px;
    background: #fff;
    min-height: 30px;
    line-height: 30px;
    display: flex;
    flex-wrap: wrap;
    padding: 10px;
    > span {
      width: 130px;
      text-align: center;
      cursor: pointer;
      border-radius: 4px;
      padding: 0 3px;
      &:hover {
        background: #f5f5f5;
      }
    }
  }
}
</style>
